<template>
	<div>
		<Navbar></Navbar>
		<TableSearch class="pil-3" ref="searchRef" @search="onSearch" ></TableSearch>
		<div class="pil-4 pb-4">
			<el-table
				v-loading="loading"
				id="crm-table"
				:data="list"
				height="calc(100vh - 206px)"
				:cell-style="cellStyle"
				stripe
				border
				highlight-current-row
				style="width: 100%"
				@row-click="handleRowClick"
			>
				<el-table-column
					v-for="(item, index) in fieldList"
					:key="index"
					:fixed="index === 0"
					:prop="item.prop"
					:label="item.label"
					:width="item.width"
					:formatter="fieldFormatter"
					show-overflow-tooltip
				>
				</el-table-column>
				<el-table-column label="保险期间" show-overflow-tooltip>
					<template slot-scope="scope">
						<div class="text-elli">{{ scope.row.startTime }}-{{ scope.row.endTime }}</div>
					</template>
				</el-table-column>
				<el-table-column label="操作" width="300">
					<template slot-scope="{ row, $index }">
						<el-button
							:disabled="row.statusId >= 37"
							type="primary"
							@click="onHandleUpload(row)"
							>补充资料</el-button
						>
						<el-button
							:disabled="row.statusId != 37""
							type="primary"
							@click="toStampUrl(row)"
							>立即签章</el-button
						>
						<el-button
							:disabled="row.statusId != 78"
							:loading="row.payLoading"
							type="primary"
							@click="queryPay(row)"
							>立即支付</el-button
						>
						<!-- <el-button
							type="primary"
							@click="onHandleUpload(row)"
							>查看</el-button
						> -->
					</template>
				</el-table-column>
			</el-table>
			<div style="margin-top: 15px">
				<el-pagination
					:current-page="currentPage"
					:page-sizes="pageSizes"
					:page-size.sync="pageSize"
					:total="total"
					class="p-bar"
					layout="total, sizes, prev, pager, next, jumper"
					@size-change="handleSizeChange"
					@current-change="handleCurrentChange"
				/>
			</div>
		</div>

		<!-- <SubmitFile
			v-bind="currentBusiness"
			:visible.sync="visibleSubmitFile"
			@save-success="onSaveSuccess"
		></SubmitFile> -->


		<el-dialog :visible.sync="showPayment" title="支付" width="450px" v-if="payInfo">
			<el-form :modal="payInfo" ref="payFormRef" label-width="90px">
				<template v-if="payInfo.type== 2">
					<el-form-item label="收款账号" prop="account">
						<el-input v-model="payInfo.account.account" readonly></el-input>
					</el-form-item>
					<el-form-item label="账户名称" prop="name">
						<el-input v-model="payInfo.account.name" readonly></el-input>
					</el-form-item>
					<el-form-item label="账户银行" prop="bankName">
						<el-input v-model="payInfo.account.bankName" readonly></el-input>
					</el-form-item>
					<el-form-item label="收款金额" prop="amount">
						<el-input v-model="payInfo.amount" readonly></el-input>
					</el-form-item>
				</template>
				<template v-else>
					<el-form-item label="支付二维码" prop="payFileUrl">
						<img style="width: 120px;" :src="payInfo.payFileUrl" readonly></img>
					</el-form-item>
				</template>
				<el-form-item label="上传支付凭证" prop="voucher"
				:rules="voucherRules"
				>
					<upload v-model="payForm.voucher"></upload>
				</el-form-item>
			</el-form>
			<div class="text-right" slot="footer">
				<el-button type="primary" @click="saveVoucher">保存</el-button>
				<el-button plain @click="showPayment = false">返回</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
import tableMixins from '@/views/mixins/table'
import { queryOrder, querySendStamp, queryPay,saveVoucher } from './api/order'
import Navbar from '@/components/Navbar'
import TableSearch from './components/TableSearch.vue'
import SubmitFile from './components/submitFile.vue'
import Upload from '@/components/form/fields/upload.vue'

export default {
	mixins: [tableMixins],
	data() {
		return {
			loading:false,
			tableMixinModule: {
				ListApi: (params) => {
					return queryOrder({...params, ...this.searchValue})
				}
			},
			searchValue: {},

			// 补充资料弹窗
			visibleSubmitFile: false,
			currentBusiness: null,

			// 支付弹窗
			showPayment: false,
			payInfo: null,
			payForm: {
				voucher: []
			},
			voucherRules: [
				{validator: (rule, value,callback) => value.length > 0 ? callback() : callback(new Error('请上传支付凭证图片'))}
			]
		}
	},
	computed: {},
	mounted() {
		this.fetchTableFields()
		this.getList()
	},
	methods: {
		fetchTableFields() {
			this.fieldList = [
				{
					label: '订单编号',
					prop: 'num',
					width: 120
				},
				{
					label: '产品名称',
					prop: 'productName'
				},
				{
					label: '订单状态',
					prop: 'statusStr'
				},
				{
					label: '投保人',
					prop: 'customerName'
				},
				{
					label: '被保人',
					prop: 'relationName'
				},
				{
					label: '订单金额',
					prop: 'money'
				},
				{
					label: '承保机构',
					prop: 'supplierName'
				}
			]
		},
		// 用户搜索
		onSearch() {
			this.searchValue = this.$refs.searchRef.formData
			this.crmReload()
		},
		// 补充资料按钮
		onHandleUpload(row) {
			this.currentBusiness = row
			// this.visibleSubmitFile = true
			this.$router.push({
				path: '/11837/submit',
				query: {businessId: row.businessId}
			})
		},
		// 补充资料成功
		onSaveSuccess() {
			this.visibleSubmitFile = false
		},
		/** 格式化字段 */
		fieldFormatter(row, column) {
			// 如果需要格式化
			return row[column.property] == null ? '--' : row[column.property]
		},
		// 获取签章链接
		toStampUrl(row) {
			this.loading=true
			const {businessId} = row
			querySendStamp({businessId})
			.then((res) => {
				window.open(res.data)
			})
			.finally(() => {
				this.loading=false
			})
		},

		// 获取支付方式
		queryPay(row) {
			this.currentBusiness= {businessId: 5581}
			this.$set(row, 'payLoading', true)
			queryPay({businessId: 5581})
			.then((res) => {
				
				this.payInfo = res.data
				this.showPayment = true
			})
			.finally(() => {
				this.$set(row, 'payLoading', false)
			})
		},
		// 保存支付凭证
		async saveVoucher() {
			await this.$refs.payFormRef.validate()
			const voucher = this.payForm.voucher[0].url
			saveVoucher({
				id: this.currentBusiness.businessId,
				voucher
			})
				.then(() => {
					this.$emit('update:model-value', false)
					setTimeout(() => showToast('操作成功'), 100)
				})
				.finally(() => {
					loadingServ.close()
				})
		},
	},
	components: { Navbar, TableSearch, SubmitFile , Upload }
}
</script>

<style lang="scss" scoped="scoped"></style>
